<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../../css/message.css">
		<style></style>
	</head>
	<body style="padding-bottom:2.5rem;">
		<section class="aui-chat" id="section">
			<template v-for="vo in lists">
				<div class="aui-chat-header" v-html="vo.date"></div>
				<div :class="vo.vue_class" :id="'messageId'+vo.messageId">
					<div class="aui-chat-media">
						<img :src="vo.avatar" :id="vo.username+vo.sentTime" style="width:40px;height:40px" v-show="vo.vue_class"/>
					</div>
					<div class="aui-chat-inner">
						<div class="aui-chat-name"></div>
						<div class="aui-chat-content" >
							<div class="aui-chat-arrow"></div>
							<div v-html="vo.text"></div>
						</div>
					</div>
				</div>
			</template>
		</section>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/UIChatBox.js"></script>
	<script type="text/javascript" src="../../script/face.js"></script>
	<script type="text/javascript" src="../../script/vue.min.js"></script>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript">
		var rong, toId, toAvatar, avatarself, userid, conversationType;
		var app = new Vue({
			el : '#section',
			data : {
				lists : [],
				avatar : '',
			}
		}), date = 0;
		apiready = function() {
			api.parseTapmode();
			toId = String(api.pageParam.toId);
			toAvatar = String(api.pageParam.toAvatar);

			avatarself = toAvatar;
			fnOpen();
			rong = api.require('rongCloud2');
			conversationType = 'PRIVATE';
			//setTimeout(function() {
				rong.getLatestMessages({
					conversationType : conversationType,
					targetId : toId,
					count : 999,
				}, function(ret, err) {
					AJ(ret)
					addMessages(ret.result);
					setTimeout(function() {
						$('html,body').animate({
							scrollTop : document.body.scrollHeight
						}, 500);
					}, 200);
				});
			//}, 500);
			api.addEventListener({
				name : 'message'
			}, function(ret, err) {
				if (ret.value.message.result.message.targetId == toId) {
					addMessages([ret.value.message.result.message]);
				}
			});
			api.addEventListener({
				name : 'message/place'
			}, function(ret, err) {
				rong.sendTextMessage({
					conversationType : conversationType,
					targetId : toId,
					text : '<a href="javascript:;" tapmode onclick="place(\'' + ret.value.lat + '\',\'' + ret.value.lng + '\')">' + ret.value.address + '</a>',
					extra : ''
				}, function(ret, err) {
					if (ret.status == 'prepare') {
						addMessages([ret.result.message]);
					} else if (ret.status == 'error') {
						api.toast({
							msg : sendTextMessageError(err.code)
						});
					}
				});
			});
		};
		function addMessages(ret) {
			var senderUserId;
			for (var vo = ret.length - 1; vo > -1; vo--) {
				if (ret[vo].sentTime - date > 18000) {
					d = new Date(ret[vo].sentTime);
					dateStr = (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes();
					$api.append($api.dom('#section'), '');
					date = ret[vo].sentTime;
				} else {
					dateStr = '';
				}
				if (ret[vo].messageDirection == 'SEND') {
					vue_class = 'aui-chat-item aui-chat-right';
					vue_avatar = avatarself;
				} else {
					vue_class = 'aui-chat-item aui-chat-left';
					vue_avatar = toAvatar
				}
				switch (ret[vo].objectName) {
					case 'RC:TxtMsg':
						text = ret[vo].content.text;
						text = text.replace(reg, function(a, b) {
							return face[a];
						});
						break;
					case 'RC:ImgMsg':
						text = '<img src="' + ret[vo].content.imageUrl + '" />';
						break;
					case 'RC:VcMsg':
						text = ret[vo].content.duration + '"<img src="../../image/voice.png" width="30" height="20" tapmode onclick="startPlay(\'' + ret[vo].content.voicePath + '\')">';
						break;
				}
				switch (ret[vo].conversationType) {
					default:
						senderUserId = '';
				}
				data = {
					"date" : dateStr,
					"text" : text,
					"avatar" : vue_avatar,
					"vue_class" : vue_class,
					"username" : ret[vo].senderUserId,
					"sentTime" : ret[vo].sentTime,
					"messageId" : ret[vo].messageId,
				}
				app.lists.push(data);
			}
			setTimeout(function() {
				$('html,body').animate({
					scrollTop : document.body.scrollHeight
				}, 800);
			}, 200);
			rong.clearMessagesUnreadStatus({
				conversationType : conversationType,
				targetId : toId
			}, function(ret, err) {
				if (ret.status == 'success') {
					api.sendEvent({
						name : 'reUnreadCount',
						extra : {}
					});
				}
			});
		}

		function startPlay(path) {
			api.startPlay({
				path : path
			}, function(ret, err) {

			});
		}

	</script>
</html>
